import React, {createRef, memo, useState} from 'react';
import HyInputStyle from "./HyInputStyle";

/**
 * 时间: 2023年12月28日 14点23分
 * HyInput输入框组件的说明
 * 原型模仿AntDesign
 * props参数说明
 * icon必须是阿里矢量图中的字符串格式,否者将不会进行展示,
 * 我们在代码中进行了正则表达式判断
 *
 */
type Props = {
  placeholder?:String,//输入框提示信息
  icon?:String,//输入框前面的icon,注意,不可以是文字,
  //我们等会需要使用正则表达式进行判断,必须
  type?:"text" | "password" | "textarea",//文本框类型,这里我们暂时只有三个
  onChange?:Function,//onChange回调,用户返回event
  value?:String,//输入框文本值
  allowClear?:Boolean,//是否显示输入框清空按钮
  className?:String,//类名
  size?:"small" | "normal" | "large",
};

export default memo(function HyInput(props: Props) {

  const [inputValue,setInputValue]=useState(props.value?props.value:"");

  function handleChange(event:React.ChangeEvent<HTMLInputElement>):void {
    //这里我们直接调用props的方法
    //当调用时,父组件的方法就会被执行了
    //这一段代码看的是AntDesign源码
    props.onChange?.(event);
    setInputValue(event.target.value);
  }

  //清空按钮的单击事件
  function clearValueClick(){
    setInputValue("");
  }
  return (
    <HyInputStyle
      $size={props.size}
      $icon={/^&#.*;$/.test(props.icon as string)}
      $allowClear={props.allowClear}
    >
      {/*
        这里我们需要通过dangerouslySetInnerHTML渲染成html节点才可以正常展示
        下列代码为固定代码
      */}
      {/*@ts-ignore*/}
      <span className="input-label iconfont" dangerouslySetInnerHTML={{__html: props.icon}}></span>
      <input
        className={`${props.className?props.className:""} hy-input`}
        autoComplete="off"
        type={props.type}
        name="username"
        onChange={handleChange}
        placeholder={props.placeholder as string}
        value={inputValue as string}
      />
      <span  className="clear-icon iconfont" onClick={clearValueClick}>&#xe64d;</span>
    </HyInputStyle>
  );
});
